<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{color: yellow;} /*1特殊性值：0,0,0,1*/
        div a{color: green;} /*2特殊性值：0,0,0,2*/
        .demo a{color: black;} /*3特殊性值：0,0,1,1*/
        .demo input[type="text"]{color: blue;} /*4特殊性值：0,0,2,1*/
        .demo *[type="text"]{color: grey;} /*5特殊性值：0,0,2,0*/
        #demo a{color: orange;} /*6特殊性值：0,1,0,1*/
        div#demo a{color: red;} /*7特殊性值：0,1,0,2*/
        .box {
            width: 200px;
            height: 200px;
            padding: 20px;
            margin: 20px;
            background: red;
            border: 20px solid black;
            box-sizing: border-box;
        }

    </style>
</head>
<body>

    <div class="box"></div>
        
<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则，第4行优先级高-->
    <a href="">第三条应该是黑色</a><!--适用第2、3行规则，第3行优先级高-->
</div>
<div id="demo">
    <a href="">第四条应该是红色</a><!--适用第6、7行规则，第6行优先级高-->
</div>
</body>
</html>